<script setup>
import HelloWorld from './components/HelloWorld.vue'
// import { ref, onBeforeMount } from 'vue'
// let msg = ref()
// let ws = null
// let reciveMsg = ref()

// const sendMsg = () => {
//   ws.send(msg.value)
// }
// onBeforeMount(() => {
//   // 创建websocket
//   const websocketUrl = "ws://127.0.0.1:8080/api/tools/ping"
//   ws = new WebSocket(websocketUrl);
//   ws.onopen = function() {console.log("链接建立时的事件")}
//   ws.onmessage = function(msgContent) {
//     console.log("接收到消息时的事件",msgContent.data)
//     reciveMsg.value = msgContent.data
//   }
//   ws.onerror = function() {console.log("链接出现错误的事件")}
//   ws.close = function() {
//     console.log("关闭socket链接时的事件")
//     ws.close()
//   }
// })
</script>

<template>
  <!-- <el-input v-model="msg" placeholder="请发送消息"></el-input>
  <el-button type="success" @click="sendMsg()">发送</el-button>
  接收到的消息:<span>{{ reciveMsg }}</span> -->
  <div>
    <router-view></router-view>
  </div>
</template>

<style lang="less">
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.auto-space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


// node节点查看pod dailog弹窗样式
.auto-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 自动换行 */
  align-items: center;
  div {
    margin: 10px auto;
  }
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb:vertical {
    border-radius: 10px;
    background: #ffff;
    background-color: rgba(144,147,153,.5);
}
::-webkit-scrollbar-thumb:horizontal {
    border-radius: 10px;
    background: #ffff;
    background-color: rgba(144,147,153,.5);
}
// .auto-layout::-webkit-scrollbar, .auto-layout>div::-webkit-scrollbar {
//   width: 8px;
// }
// .auto-layout::-webkit-scrollbar-thumb:vertical, .auto-layout>div::-webkit-scrollbar-thumb:vertical {
//     border-radius: 10px;
//     background: #ffff;
//     background-color: rgba(144,147,153,.5);
// }
// .auto-layout::-webkit-scrollbar-thumb:horizontal, .auto-layout>div::-webkit-scrollbar-thumb:horizontal {
//     border-radius: 10px;
//     background: #ffff;
//     background-color: rgba(144,147,153,.5);
// }



</style>
